<template>
  <div id="app" class="box box-ver">
    <loading v-if="isLoading"></loading>
    <transition :name="routerAni">
      <router-view class="router-view of-y-s"></router-view>
    </transition>
    <welcome @hideWelcome="hideWelcome" v-if="showWelcome === true"></welcome>
    <index-content v-if="hasInitData" :actTabIndex="actTabIndex"></index-content>
    <index-tab v-if="hasInitData" :actTabIndex="actTabIndex" @changeTab="changeTab"></index-tab>
  </div>
</template>

<script>
import loading from '@/components/loading'
import indexContent from '@/components/indexContent'
import indexTab from '@/components/indexTab'
import welcome from '@/components/welcome'
import { mapState } from 'vuex'
import { getQueryString } from '@/assets/js/common'

export default {
  name: 'app',
  data () {
    return {
      actTabIndex: null,
      hasInitData: false,
      showWelcome: sessionStorage.getItem('showWelcome')
    }
  },
  components: {
    loading,
    indexContent,
    indexTab,
    welcome
  },
  computed: mapState(['isLoading', 'routerAni', 'userNum', 'userInfo']),
  watch: {
    userNum () {
      if (this.userNum) this.loginEAS()
    }
  },
  mounted () {
    if (this.userNum) this.loginEAS()
  },
  methods: {
    loginEAS () {
      this.$http({
        url: this.$config.api.host,
        data: {
          method: 'loginEAS',
          userName: 'sysWS',
          password: 'sysWS',
          slnName: 'eas',
          dcName: 'eas750',
          language: 'L2',
          dbType: '1'
        }
      }).then(res => {
        if (res.code === 200) {
          let sessionID = res.msg
          this.$store.commit('sessionID', sessionID)
          this.getUserInfo()
        }
      })
    },
    getUserInfo () {
      this.$http({
        url: this.$config.api.host,
        data: {
          method: 'getAccountBank',
          userNum: this.userNum
        }
      }).then(res => {
        if (res.code === 200) {
          let userInfo = res
          if (userInfo.depName) userInfo.depName = userInfo.depName.split('_').pop()
          this.$store.commit('userNum', userInfo.userNum)
          this.$store.commit('userInfo', userInfo)
          this.initData()
        }
      })
    },
    initData () {
      this.requestStoreData()
      let actTabIndex = this.$route.query.actTabIndex || getQueryString('actTabIndex')
      this.actTabIndex = actTabIndex ? +actTabIndex : 0
      this.hasInitData = true
      if (!sessionStorage.getItem('showWelcome')) {
        sessionStorage.setItem('showWelcome', '1')
        this.showWelcome = true
      }
    },
    changeTab (index) {
      if (index === 0) {
        this.actTabIndex = index
      } else {
        if (index === 1) {
          // location.replace(this.$config.url.invoice)
          // location.href = this.$config.url.invoice
          window.open(this.$config.url.invoice)
        } else {
          // location.replace(this.$config.url.my)
          window.open(this.$config.url.my)
        }
      }
    },
    requestStoreData () {
      // 缓存出差类型
      this.getExpenseUtils()
    },
    // 获取出差类型
    getExpenseUtils () {
      this.$http({
        url: this.$config.api.host,
        data: {
          method: 'getExpenseUtils',
          companyNum: this.userInfo.companyNum,
          from: 'evection'
        }
      }).then(res => {
        if (res.code === 200) {
          // console.log(res.t)
          let evectionExpense = res.t.splice(0, 3)
          this.$store.commit('evectionExpense', evectionExpense)
        }
      })
    },
    hideWelcome () {
      this.showWelcome = false
    }
  }
}
</script>

<style lang="scss">
@import './assets/css/config';
#app{
  position:relative;
  width:100%;
  height:100%;
  background-color:$bgColor;
}
.router-view{
  position: absolute;
  z-index:2;
  left:0;
  top:0;
  width:100%;
  height:100%;
  background-color:$bgColor;
  transition: opacity .66s, transform .33s cubic-bezier(0.25,0.1,0.25,1);
}
.slide-left-enter{
  opacity:1;
  transform: translate3d(100%, 0, 0);
}
.slide-left-leave-active {
  opacity:0;
  transform: translate3d(0%, 0, 0);
}
.slide-right-enter {
  opacity:1;
  transform: translate3d(-100%, 0, 0);
}
.slide-right-leave-active {
  opacity:0;
  transform: translate3d(0, 0, 0);
}
</style>
